<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  


  <script>
    var viewHeight = document.documentElement.clientHeight; // 可视化区域的高度

    function lazeload () {
      let eles = document.querySelectorAll('img[data-original][lazyload]'); // 获取属性名中有data-origin的
      Array.prototype.forEach.call(eles, function(item, index) {
        let rect;
        if (item.dataset.original === '') {
          return;
        }

        rect = item.getBoundingClientRect();

        // 图片一进入可视区，动态加载
        if (rect.bottom >= 0 && rect.top < viewHeight) {
          !function () {
            let img = new Image();
            img.src = item.dataset.original;
            img.onload = function () {
              item.src = img.src;
            }
            item.removeAttribute('data-original');
            item.removeAttribute('lazyload');
          }();
        }
      })
    }

    lazyload();
    document.addEventListener('scroll', lazyload)
  </script>

</body>
</html>